<template>
    <div>
      <h1>车辆信息</h1>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="car in cars" :key="car.id">
            <td>{{ car.id }}</td>
            <td>{{ car.name }}</td>
            <td>{{ car.price }}</td>
            <td>
              <button @click="editCar(car)">编辑</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { defineProps, defineEmits } from "vue";
  
  const props = defineProps({
    cars: {
      type: Array,
      required: true,
    },
  });
  
  const emits = defineEmits(["updateCar"]);
  
  function editCar(car) {
    emits.updateCar(car);
    selectedCar.value = car;
    $router.push({ name: "CarEdit" });
  }
  </script>